<script setup lang="ts">
import TaskToDo from "./components/tasktodo.vue";
import TaskDone from "./components/taskdone.vue";
import Notice from "./components/notice.vue";
import Message from "./components/message.vue";
import { initConnect, closeConnect } from "@/utils/websocket";

const taskTodoRef = ref(null);
const taskDoneRef = ref(null);
const messageRef = ref(null);
const noticeRef = ref(null);

const state = reactive({
  taskActiveName: "0",
  messageActive: "0",
  currentDate: new Date()
});

const handleTaskTabChange = tabName => {
  if (tabName === "0" && taskTodoRef.value) {
    taskTodoRef.value.queryTableData();
  } else if (tabName === "1" && taskDoneRef.value) {
    taskDoneRef.value.queryTableData();
  }
};

const handleMessageTabChange = tabName => {
  if (tabName === "0" && noticeRef.value) {
    noticeRef.value.queryTableData();
  } else if (tabName === "1" && messageRef.value) {
    messageRef.value.queryTableData();
  }
};

onMounted(() => {
  initConnect();
});

onBeforeUnmount(() => {
  closeConnect();
});
</script>

<template>
  <div class="container">
    <el-scrollbar>
      <div class="container-content">
        <el-row :gutter="10" align="middle">
          <el-col :span="18">
            <el-tabs
              v-model="state.taskActiveName"
              type="border-card"
              @tab-change="handleTaskTabChange"
            >
              <el-tab-pane label="待办任务" name="0">
                <TaskToDo ref="taskTodoRef" />
              </el-tab-pane>
              <el-tab-pane label="已办任务" name="1">
                <TaskDone ref="taskDoneRef" />
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="6">
            <div class="calendar-container">
              <el-calendar v-model="state.currentDate" />
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10" align="middle">
          <el-col :span="24">
            <el-tabs
              v-model="state.messageActive"
              type="border-card"
              @tab-change="handleMessageTabChange"
            >
              <el-tab-pane label="系统公告" name="0">
                <Notice ref="noticeRef" />
              </el-tab-pane>
              <el-tab-pane label="站内消息" name="1">
                <Message ref="messageRef" />
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>
<style scoped lang="scss">
.calendar-container {
  width: 100%;
  border: 1px solid $base-border-color-base;

  :deep(.el-calendar__body) {
    width: 320px; /* 设置日历宽度 */
    height: 320px; /* 设置日历高度 */
  }

  :deep(.el-calendar__header) {
    height: 40px !important;
    text-align: center; /* 标题居中 */
  }

  :deep(.el-calendar-day) {
    height: 48px; /* 设置日历天数格子的高度 */
    line-height: 48px; /* 设置天数格子的行高，保持居中 */
  }
}
</style>
